import './page.scss'
import {curRouteMixin} from "../../router/mixins";

export function createDemoPage({hasAside = true} = {}) {
  window.getZAppScrollY = function () {
    return document.getElementById('appMain').scrollTop
  }
  return  {
    mixins: [
      curRouteMixin
    ],
    data() {
      return {
        isFolded: false
      }
    },
    methods: {
      $_handleSelectMenu(path) {
        this.$router.push(path)
      // console.log(path)
      },
      handleToggle() {
        this.isFolded = !this.isFolded
      },
      renderMenuItems(h) {
        let items =  this.$_parRouteDefChildren
        let self = this
        return items.filter(item => {
          if (item?.meta?.hide) {
            return false
          }
          return true
        }).map(item => {
          let clsArr = []
          let pathArr =  self.$route.path.split('/')
          if (pathArr && (pathArr[pathArr.length - 1] === item.path)) {
            clsArr.push('is-active')
          }
          // console.log(pathArr, item)
          return (
            <el-menu-item
              index={item.path}
              class={clsArr.join(' ')}
            >
              <i class="el-icon-menu"></i>
              <span slot="title">{this.Z_GET(item, 'meta.title')}</span>
            </el-menu-item>
          )
        })
      }
    },
    render(h) {
      let eleItems = this.renderMenuItems(h)
      let menuClsArr = ["demo-menu-vertical"];
      let style = {
        fontSize: '20px',
        position: 'absolute',
        bottom: 0
      }
      let iconStyle= {
        fontSize: '20px',
      }
      let icon = this.isFolded ? 'el-icon-s-unfold' : 'el-icon-s-fold';
      let handleToggle = this.handleToggle
      let cls = {
        'app-container': 1,
        'is-folder': this.isFolded
      }
      let asideWidth = hasAside ? '200px' : 0
      return (
        <el-container id="appContainer" class={cls}>
          <el-aside width={asideWidth}>
            <el-menu
              class={menuClsArr.join(' ')}
              onSelect={this.$_handleSelectMenu}
            >
              {eleItems}
            </el-menu>
            <div class="toggle-menu" style={style}>
              <el-button onClick={handleToggle} style={iconStyle} icon={icon}></el-button>
            </div>
          </el-aside>
          <el-main  id="appMain"  class="app-scrollbar">
            <router-view></router-view>
          </el-main>
        </el-container>
      )
    }
  }

}
